﻿@import "common.css";

/*Index*/
.app {width:100%;height:100%;}
.kui-header {
    position:absolute;top:0;left:180px;right:0;height:50px;border-bottom:1px solid #ccc;
    background-color:#fafafa;
}
.kui-sider {
    position:absolute;top:0;left:0;bottom:0;width:180px;
    background-color:#1c66b9;color:#fff;overflow:hidden;
}
.kui-scroll {position:absolute;top:51px;left:0;bottom:0;width:190px;overflow-x:hidden;}
.kui-body {position:absolute;top:51px;left:180px;right:0;bottom:0;overflow:hidden;}
.kui-footer {
    position:absolute;left:180px;right:0;bottom:0;display:none;
    height:30px;line-height:30px;
    background-color:#393D49;color:#ddd;
    text-align:right;padding-right:10px;
}
.kui-error {position:absolute;top:40px;left:0;right:0;bottom:0;}
.kui-sider .fa {width:16px;height:16px;margin-right:2px;text-align:center;}

/*header*/
.toggleMenu, .appName, .logo {height:50px;line-height:50px;}
.toggleMenu {float:left;text-align:center;width:50px;cursor:pointer;}
.appName {float:left;font-size:1.2rem;margin-left:10px;}
.logo {overflow:hidden;border-bottom:1px solid #3173bd;}
.logo img {width:auto;}
.logo .icon, .logo .text {display:block;font-size:2rem;font-weight:bold;color:#fff;text-align:center;}
.logo .icon {display:none;}
.logo:before {margin-right:15px;}
.topMenu {float:left;height:50px;padding:5px 10px 0 10px;}
.topMenu li {display:inline-block;height:43px;text-align:center;padding:0 15px;cursor:pointer;}
.topMenu li .icon {display:block;font-size:1.5rem;}
.topMenu li .name {display:block;font-size:0.8rem;}
.topMenu li.active {border-bottom:3px solid #1c66b9;}
.nav {box-sizing:border-box;padding-right:10px;}
.nav-item {position:relative;cursor:pointer;}
.nav .nav-item:before {font-size:1.2rem;}
.nav .nav-item {display:inline-block;line-height:49px;padding:0 10px;}
.nav .nav-item .text {font-size:1rem;}
.nav .nav-item .badge-top {top:5px;}
.nav .nav-item:hover {background-color:#f1f1f1;}
.nav .nav-item.text:hover {background-color:inherit;}
.nav-child {display:none;top:50px;right:5px;-webkit-transition:all .3s;transition:all .3s;}
.nav-child.show {display:block;}

/*sider*/
.side-user {text-align:center;padding-top:20px;}
.side-user img {width:60px;height:60px;margin:0 auto;}
.side-user .name {display:block;font-size:1rem;font-weight:bold;}

.leftMenu {padding:20px 0;}
.leftMenu li {cursor:pointer;height:60px;line-height:60px;padding:0 20px;font-weight:bold;}
.leftMenu li .icon {display:inline-block;font-size:1.5rem;}
.leftMenu li .name {display:inline-block;font-size:1.2rem;margin-left:15px;}
.leftMenu li.active {background-color:#fff;color:#000;}

.nav-tree {width:180px;}
.nav-tree .nav-child {background-color:#195aa4;}
.nav-tree .nav-child dd {padding-left:26px;}
.nav-tree .nav-item {position:relative;line-height:45px;}
.nav-tree .nav-title {padding:0 12px;}
.nav-tree .nav-item span.fa {
    position:absolute;top:13px;right:10px;
    -webkit-transition:all .3s;transition:all .3s;
}
.nav-tree .nav-title,.nav-tree .nav-child dd {border-left:3px solid transparent;}
.nav-tree .nav-title:hover,.nav-tree .nav-child dd:hover {
    border-left-color:#5FB878;-webkit-transition:all .3s;transition:all .3s;
}
.nav-tree .nav-title.active,.nav-tree .nav-child dd.active {border-left-color:#5FB878;}

/*body*/
.kui-module-tips {
    margin:10px;padding:5px 10px;border:1px solid #ccc;background-color:#fafafa;border-left:3px solid #1c66b9;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
}
.kui-module-tips .name {font-weight:bold;font-size:1.2rem;margin-right:10px;}
.kui-module-tips .description {font-size:1rem;color:#555;}
.kui-tips-tr {position:absolute;top:10px;right:10px;font-weight:bold;}
.kui-tips-bl {position:absolute;left:10px;bottom:10px;font-weight:bold;}
.kui-content {position:absolute;top:0;left:0;bottom:0;right:0;padding:10px;overflow:auto;}
.kui-content1 {position:absolute;top:50px;left:0;bottom:0;right:0;padding:10px;overflow:auto;}

.kui-tabs .tab.header {height:45px;overflow:hidden;}
.kui-tabs .tab li {margin:0;padding:10px 20px;font-size:1rem;position:relative;}
.kui-tabs .tab li .close {top:5px;right:0;color:#ccc;}
.kui-tabs .tab li .close:hover {color:#d9534f;}
.kui-tabs .tab-body.top {top:45px;}
.kui-tabs .tab-body .grid-view {top:0;left:0;right:0;bottom:0;}

/*mini side*/
.kui-mini .kui-sider {width:50px !important;}
.kui-mini .kui-scroll {width:60px !important;}
.kui-mini .kui-header,
.kui-mini .kui-body,
.kui-mini .kui-footer {left:50px !important;}
.kui-mini .nav-tree .nav-child dd {padding-left:12px;}
.kui-mini .nav-tree span {display:none;}
.kui-mini .logo .icon {display:block;}
.kui-mini .logo .text {display:none;}

@media screen and (max-width:768px) {
    .kui-sider,
    .kui-scroll {width:50px !important;}
    .kui-body,
    .kui-footer {left:50px !important;}
    .kui-side .nav-tree .nav-child dd {padding-left:12px;}
    .kui-side .nav-tree span {display:none;}
}

/*view*/
.left-view {position:absolute;left:10px;top:10px;bottom:10px;overflow:auto;width:220px;border:1px solid #ccc;}
.left-tree {left:232px;top:10px;bottom:8px;}
.left-tree .tool.only {border-top-width:1px;margin-top:0;}
.left-tree .grid {top:31px;}

/*form*/
label.required:before, th.required:before {content:'*';color:#f00;padding-right:2px;}
button, input, select, .form-input .text, .form-input .unit,
.form-label, .form-text, .form-radio, .form-tips {height:30px;line-height:30px;}
.form-input .icon, .form-input .unit, .form-input .btn {height:27px;line-height:27px;}
.grid-view .tool button {height:26px;line-height:26px;}
.inline .form-item, .inline .form-label, .inline .form-text, .inline .form-input, .inline .form-tips {display:inline-block;}

/*SysInstall*/
.install {
    position:absolute;top:50%;left:50%;width:500px;height:540px;margin-left:-250px;margin-top:-300px;
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;
}
.si-title {margin:50px 0 20px 0;font-size:2rem;font-weight:bold;text-align:center;}
.si-button {padding:0 35px;height:40px;line-height:40px;}
.si-form {width:450px;margin:0 auto;}
.si-form .form-label {width:120px;text-align:right;}
.si-form .form-input {width:250px;display:inline-block;}

/*SysSystem*/
.ss-system {padding:10px 60px;}
.ss-terms .text {position:absolute;top:0;left:185px;}
.ss-pass, .ss-fail {font-weight:bold;}
.ss-pass {color:#337ab7;}
.ss-fail {color:#d9534f;}
.ss-form .tab {position:absolute;left:0;top:20px;width:140px;height:auto;}
.ss-form .userMessage {position:absolute;top:10px;left:141px;right:10px;bottom:10px;}
.ss-form .content {position:absolute;top:20px;left:160px;right:0;padding:20px;}
.ss-form .avatar {position:absolute;top:70px;right:150px;}
.ss-form .avatar .icon {
    font-size:7rem;width:150px;height:150px;line-height:150px;text-align:center;
    border:1px solid #ccc;background-color:#f1f1f1;color:#337ab7;
}
.ss-form .form-label {width:150px;padding-right:15px;text-align:right;font-weight:bold;}
.ss-form .form-input {display:inline-block;}
.ss-form .form-button {padding-left:190px;text-align:left;}
.ss-form .userMessage .form-label {width:auto;}
.ss-form .userMessage .form {margin-top:10px;}
.ss-form .userMessage .form-button {padding:10px;text-align:center;}
.ss-form .userMessage .noread {font-weight:bold;color:#000;}

/*SysDic*/
.form th.dic-extend {text-align:left;line-height:30px;}

/*SysRole*/
.role-module {position:absolute;left:41%;top:0;right:180px;bottom:0;overflow:auto;padding:10px;background-color:#f1f1f1;}
.role-button, .role-column {position:absolute;top:0;bottom:0;overflow:auto;padding:10px;background-color:#f3f3f3;width:160px;}
.role-button .form-radio, .role-column .form-radio {display:block;}
.role-button {right:161px;}
.role-column {right:1px;}